<template>
    <div class="box">
        <div>
            <img style="width: 196px;height: 73px;" src="../../assets/img/logo.png" />
            <div>
                <span class="title">新绿色药业配方颗粒标准生产质量追溯平台</span>
                <span class="info1">从产业链源头做起，经过源头种植、饮片生产、颗粒生产、临床调剂四个环节，实现全程质量管控，形成安全、有效的供应全过程。</span>
            </div>
            <img src="../../assets/img/banner_login.png" style="margin: 50px 0 59px;" />
            <div class="info2">
                技术支持：<a href="javasc:;">原链科技</a>
            </div>
        </div>
        <div class="login">
            <p class="login-title">账号登录</p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                <el-form-item prop="phone">
                    <div class="form_item">
                        <i class="user"></i>
                        <el-input v-model.trim="ruleForm.phone" placeholder="用户名" />
                    </div>
                </el-form-item>

                <el-form-item prop="password">
                    <div class="form_item">
                        <i class="password"></i>
                        <el-input v-model.trim="ruleForm.password" placeholder="密码" type="password" @keyup.enter.native="submitForm()" />
                    </div>
                </el-form-item>
                <el-form-item prop="num">
                    <div class="form_item">
                        <i class="auth_code"></i>
                        <el-input v-model.trim="ruleForm.num" placeholder="验证码" auto-complete="off" />
                        <div class="login-code" @click="init">
                            <s-identify :identifyCode="identifyCode"></s-identify>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button round type="success" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
                <div class="forget_pwd">
                    <el-link type="primary" @click="openedit">修改密码</el-link>
                </div>
            </el-form>
        </div>

        <el-dialog title="" :visible.sync="centerDialogVisible1" width="30%" center :close-on-click-modal="false">
            <!--    <span>您当前登录账号密码为初始密码，请您尽快更换</span>-->
            <el-form :model="form" :rules="rules1" ref="form">
                <el-form-item label="" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" placeholder="用户名" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth" prop="oldPassword">
                    <el-input v-model="form.oldPassword" placeholder="旧密码" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth" prop="newPassword">
                    <el-input v-model="form.newPassword" placeholder="新密码" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth" prop="repeatPassword">
                    <el-input v-model="form.repeatPassword" placeholder="确认密码" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <!--      <span slot="footer" class="dialog-footer">-->
                <el-button type="primary" @click="sure1('form')">确认</el-button>
                <!--         </span>-->
            </el-form>

            <!--    <el-button type="primary" @click="openedit">修改密码</el-button>-->

        </el-dialog>
        <el-dialog v-if='false' title="" :visible.sync="centerDialogVisible" width="30%" center>
            <span>您当前登录账号密码为初始密码，请您尽快更换</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sure">确定</el-button>
                <el-button type="primary" @click="openedit">修改密码</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { login, login_getnum, updatepwd } from '@/request/api';
import SIdentify from '../common/authcode';
import md5 from 'js-md5'
export default {
    components: { SIdentify },
    data() {
        return {
            ruleForm: {
                phone: '',
                password: '',
                num: ''
            },
            rules: {
                phone: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                num: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            identifyCode: '',
            identifyCodes: 'z645xcvbnml786kjhfgda453sqerty579uiop12347890',
            centerDialogVisible: false,
            centerDialogVisible1: false,
            form: {},
            rules1: {
                phone: [{ required: true, message: '请输入员工编号', trigger: 'blur' }],
                newPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                oldPassword: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                repeatPassword: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            formLabelWidth: '0'
        };
    },
    mounted() {
        this.init();
        // if(this.$route.fullPath == "/login"){
        // 	// alert(1111)
        // 	// console.log(localStorage.getItem("reset"))

        // }
        this.$store.commit('setuploadimg', 'http://' + window.location.host);
        this.$store.commit('setimg', 'http://' + window.location.host + '/');
    },
    methods: {
        init() {
            login_getnum('').then((res) => {
                this.identifyCode = res.data;
            });
        },
        openedit() {
            this.centerDialogVisible = false;
            this.centerDialogVisible1 = true;
        },
        sure() {
            this.centerDialogVisible = false;
            this.$router.push({ path: '/home' });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    login({
                        phone: this.ruleForm.phone,
                        password: md5(this.ruleForm.password),
                        num: this.ruleForm.num
                    }).then((res) => {
                        localStorage.setItem('ms_username', res.data.user.name);
                        localStorage.setItem('ide', 'qqq');
                        localStorage.setItem('companyId', res.data.user.companyId);
                        localStorage.setItem('userType', res.data.userType);
                        localStorage.setItem('userid', res.data.user.id);
                        this.$store.commit('setname', res.data.user.name);
                        this.$store.commit('setnameid', res.data.user.id);
                        this.$store.commit('setpermission', res.data.menus);

                        //TODO 苟家龙说不需要提示修改初始密码
                        // if (res.data.pwAlarm == 1) {
                        //     this.centerDialogVisible = true;
                        // } else {
                        //     this.$notify({
                        //         title: '提示',
                        //         message: '登录成功',
                        //         type: 'success',
                        //         duration: 1000
                        //     });
                        //     console.log(111);
                        //     this.$router.push({ path: '/home' });
                        // }
                        this.$notify({
                            title: '提示',
                            message: '登录成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.$store.commit('setSwitchHeadTab','生产系统')
                        this.$router.push({ path: '/home' });
                    });
                } else {
                    return false;
                }
            });
        },
        sure1(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    updatepwd(this.form).then((res) => {
                        this.$notify({
                            title: '提示',
                            message: '修改成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.centerDialogVisible1 = false;
                        this.form = '';
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.box {
    display: flex;
    width: 100vw;
    height: 100vh; 
    padding:0 190px;
    padding-top: 120px;
    box-sizing: border-box;
    background-image: url(../../assets/img/background.png);
    background-size: 100% 100%;
    overflow: auto;
}
.title {
    display: block;
    font-weight: 600;
    font-size: 38px;
    color: #231f20;
    padding: 48px 0;
}
.info1 {
    font-size: 18px;
    line-height: 44px;
    display: block;
    color: #737373;
}
.info2 {
    font-size: 12px;
    line-height: 28px;
    color: #737373;
}
.login {
    width: 538px;
    min-width: 538px;
    height: 760px;
    font-weight: 600;
    padding-top: 84px;
    padding-left: 56px;
    padding-right: 56px;
    background: #ffffff;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 219px;
    box-sizing: border-box;
}
.login-title {
    font-size: 36px;
    color: #282829;
    padding-bottom: 118px;
}
.form_item {
    display: flex;
    justify-content: center;
    align-items: center;
    i {
        display: block;
        width: 26px;
        height: 26px;
        margin-right: 12px;
    }
    .user {
        background-image: url(../../assets/img/user.png);
    }
    .password {
        background-image: url(../../assets/img/pwd.png);
    }
    .auth_code {
        flex-shrink: 0;
        background-image: url(../../assets/img/auth_code.png);
    }
}
.el-form-item__content button {
    width: 100%;
    height: 56px;
    font-size: 18px;
    color: #fff;
    margin-top: 104px;
    border-radius: 24px;
    background-color: #05b089;
}
.forget_pwd {
    display: flex;
    justify-content: center;
    align-items: center;
}
.el-link {
    font-size: 14px;
    color: #05b089;
}
</style>
